<template>
  <div class="pages_content table">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main style="display: flex">
        <div class="card">
          <div class="card_nav">
            <div>
              <el-button v-if="ButtonList.findIndex(res=>(res.buttonValue=='BIANJI'))!==-1" size="small" class="bottom_all" style="margin-left: 0" @click="edit()">
                <i class="icon iconfont iconicon_button_add" style="font-size: 12px"></i>
                编辑
              </el-button>
            </div>
          </div>
          <div v-loading="tableLoading" class="card_info" :style="style+'height:calc(100% - 76px)'" element-loading-text="统计中...">
            <div id="edit_flex scroll" ref="edit_flex" :key="flexTime" class="edit_flex">
              <template v-for=" (item,index) in Echarts1">
                <!-- <div :key="index" :style="style1(item.htmlCss)"> -->
                <div :key="index" class="echarts_item1" :style="style1(item.htmlCss)">
                  <div v-if="item.graphicalCss=='table-basic'">
                    <Table :data="item"></Table>
                  </div>
                  <div v-else>
                    <Echart1 :data="item" :show="item.dataField.Ydata.length>3?false:true" :name="'right'+item.id"></Echart1>
                  </div>
                </div>
                <!-- </div> -->
              </template>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import mixin from "@/mixins/ICPSmixin.js";
import Echart1 from './components/echart1.vue';
import Table from './components/table.vue';
import {
  source_page,
  get_detail as get_flex,
} from "@/api/board/datashow.js";
export default {
  mixins: [mixin],
  components: {
    Echart1,
    Table
  },
  data() {
    return {
      pagesType: 0,
      fromData: {
        page: 1,
        pageSize: 9999
      },
      Echarts1: [],
      flexTime: new Date().getTime()
    };
  },
  /*获取看板样式*/
  watch: {
    $route: {
      handler() {
        this.tableLoading = true
        this.getEcharts()
      },
      deep: true,
      immediate: true,
    }
  },
  methods: {
    /**获取展示*/
    async   getEcharts() {
      let _this = this
      let flex = []
      let flexData = []
      _this.fromData.functionId = _this.$route.query.functionId
      await source_page(_this.fromData).then(res => {
        res.data.data.forEach(res => {
          res.dataField = JSON.parse(res.dataField)
          res.colorCss = JSON.parse(res.colorCss)
        })
        flexData = JSON.parse(JSON.stringify(res.data.data)).filter(res => (res.publishStatus == 1))
      })
      await   /**获取布局*/
        get_flex({ functionId: _this.$route.query.functionId }).then(res => {
          if (res.data) {
            _this.flexId = res.data.id
            flex = JSON.parse(res.data.htmlCss)
          }
          _this.Echarts1 = []
        })
      console.log(flexData)
      console.log(flex)
      _this.Echarts1 = flexData.map((res) => {
        let item = flex.find(item => (res.id == item.id))
        let obj = {
          ...res,
          htmlCss: _this.figure(item ?.htmlCss)
        }
        console.log(_this.figure(flex.find(item => (res.id == item.id)) ?.htmlCss))
        return obj
      })
      console.log(_this.Echarts1)
      _this.$nextTick(() => {
        _this.tableLoading = false
        _this.flexTime = new Date().getTime()
      })
    },
    // /**目标元素位置计算*/
    style1(e) {
      // console.log(e)
      return `height:${e.h}px;width:${e.w}px;top:${e.top}px;left:${e.left}px`
    },
    /**百分比转像素*/
    figure(e) {
      let a = e ?? { h: Math.random() * 0.5, left: Math.random() * 0.5, top: Math.random() * 0.5, w: Math.random() * 0.5 }
      let _this = this
      let box = _this.$refs.edit_flex
      let w = box.offsetWidth
      let h = box.offsetHeight
      let obj = {
        h: Number((Number(a.h) * h).toFixed(2)),
        left: Number((Number(a.left) * w).toFixed(2)),
        top: Number((Number(a.top) * h).toFixed(2)),
        w: Number((Number(a.w) * w).toFixed(2)),
      }
      return obj
    },
    /*进入编辑*/
    edit() {
      this.$router.push({ name: "editBoard", query: { functionId: this.$route.query.functionId } });
    }
  },
};
</script>

<style lang="scss" scoped>
.edit_flex {
  position: relative;
  height: 100%;
  width: 100%;
}
.echarts_item1 {
  position: absolute;
  > div {
    height: 100%;
    width: 100%;
  }
}
</style>
